<template>
  <section 
    id="pricing" 
    class="section-padding"
    :style="{ 
      backgroundColor: bgColor,
      '--primary-color': primaryColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="text-primary font-medium">服务定价</span>
        <h2 class="section-title">灵活的服务套餐</h2>
        <p class="section-subtitle">根据您的企业规模和需求，选择最适合的服务方案</p>
        
        <!-- 计费方式切换 -->
        <div 
          v-if="showBillingToggle"
          class="flex items-center justify-center mt-8 space-x-4"
        >
          <span class="text-dark/70">按月付费</span>
          <div 
            class="relative w-14 h-8 bg-gray-200 rounded-full cursor-pointer transition-colors duration-300"
            :class="isAnnualBilling ? 'bg-primary/20' : ''"
            @click="toggleBilling"
          >
            <div 
              class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform duration-300 shadow-sm"
              :style="{ 
                transform: isAnnualBilling ? 'translateX(100%)' : 'translateX(0)',
                backgroundColor: isAnnualBilling ? primaryColor : 'white'
              }"
            ></div>
          </div>
          <span class="text-dark/70">按年付费</span>
          <span 
            v-if="annualDiscount > 0"
            class="ml-2 px-3 py-1 bg-green-100 text-green-600 text-xs rounded-full"
          >
            省{{ annualDiscount }}%
          </span>
        </div>
      </div>
      
      <!-- 价格卡片网格 -->
      <div 
        class="grid gap-8 max-w-5xl mx-auto"
        :class="gridLayout"
      >
        <div 
          v-for="(plan, index) in pricingPlans" 
          :key="index"
          :class="getPlanCardClasses(plan)"
        >
          <!-- 标签（如"最受欢迎"） -->
          <div 
            v-if="plan.featured"
            class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium"
          >
            最受欢迎
          </div>
          
          <div class="p-8">
            <h3 class="text-xl font-bold mb-2">{{ plan.name }}</h3>
            <p class="text-dark/70 mb-6">{{ plan.description }}</p>
            
            <!-- 价格信息 -->
            <div class="mb-6">
              <span class="text-4xl font-bold">
                {{ plan.pricePrefix }}
                {{ isAnnualBilling && plan.annualPrice ? plan.annualPrice : plan.price }}
                {{ plan.priceSuffix }}
              </span>
              <span class="text-dark/60" v-if="!plan.customPricing">
                /月
              </span>
            </div>
            
            <!-- 包含功能列表 -->
            <ul class="space-y-3 mb-8">
              <li 
                v-for="(feature, fIndex) in plan.features" 
                :key="fIndex"
                class="flex items-start"
                :class="feature.available ? '' : 'text-dark/40'"
              >
                <i 
                  class="fa mt-1 mr-3"
                  :class="feature.available ? 'fa-check text-green-500' : 'fa-times'"
                ></i>
                <span>{{ feature.label }}</span>
              </li>
            </ul>
            
            <!-- 选择按钮 -->
            <a 
              :href="plan.buttonLink" 
              class="block w-full py-3 text-center rounded-lg transition-custom"
              :class="getPlanButtonClasses(plan)"
              @click.prevent="handlePlanSelect(plan)"
            >
              {{ plan.buttonText }}
            </a>
          </div>
        </div>
      </div>
      
      <!-- 附加信息 -->
      <div class="text-center mt-12">
        <p class="text-dark/70 mb-4" v-if="trialInfo.show">
          所有方案均包含{{ trialInfo.days }}天免费试用，不满意可全额退款
        </p>
        <a 
          href="#" 
          class="text-primary font-medium hover:underline"
          @click.prevent="handleCompareClick"
        >
          查看详细服务对比 <i class="fa fa-arrow-right ml-1"></i>
        </a>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'PricingSection',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'pricing-section',
      displayName: '费用卡片模块',
      description: '展示不同服务套餐和价格的组件，支持计费方式切换',
      icon: 'fa-tags',
      category: '商业组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'showHeader',
            label: '显示标题区域',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '布局配置',
        fields: [
          {
            name: 'gridLayout',
            label: '网格布局',
            type: 'select',
            options: [
              { label: '移动端单列，桌面三列', value: 'grid-cols-1 md:grid-cols-3' },
              { label: '移动端单列，平板双列', value: 'grid-cols-1 md:grid-cols-2' },
              { label: '全尺寸单列', value: 'grid-cols-1' },
              { label: '全尺寸双列', value: 'grid-cols-1 sm:grid-cols-2' },
              { label: '全尺寸三列', value: 'grid-cols-1 md:grid-cols-3' }
            ],
            defaultValue: 'grid-cols-1 md:grid-cols-3'
          },
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'cardShadow',
            label: '卡片阴影',
            type: 'select',
            options: [
              { label: '无阴影', value: 'none' },
              { label: '轻微阴影', value: 'sm' },
              { label: '中等阴影', value: 'md' },
              { label: '明显阴影', value: 'lg' }
            ],
            defaultValue: 'md'
          }
        ]
      },
      {
        title: '计费配置',
        fields: [
          {
            name: 'showBillingToggle',
            label: '显示计费切换',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'annualDiscount',
            label: '年度折扣(%)',
            type: 'number',
            min: 0,
            max: 100,
            defaultValue: 20
          },
          {
            name: 'trialInfo',
            label: '试用信息',
            type: 'object',
            defaultValue: {
              show: true,
              days: 30
            }
          }
        ]
      },
      {
        title: '套餐配置',
        fields: [
          {
            name: 'pricingPlans',
            label: '价格套餐',
            type: 'array',
            description: '配置服务套餐信息',
            defaultValue: [
              {
                name: '基础版',
                description: '适合小型企业的入门级方案',
                price: '9,800',
                annualPrice: '7,840',
                pricePrefix: '¥',
                priceSuffix: '',
                customPricing: false,
                featured: false,
                buttonText: '选择方案',
                buttonLink: '#',
                features: [
                  { label: '5个核心模块使用权', available: true },
                  { label: '最多50用户', available: true },
                  { label: '基础数据分析', available: true },
                  { label: '工作日8小时支持', available: true },
                  { label: '定制化开发', available: false },
                  { label: '专属客户经理', available: false }
                ]
              },
              {
                name: '企业版',
                description: '适合中大型企业的全面方案',
                price: '29,800',
                annualPrice: '23,840',
                pricePrefix: '¥',
                priceSuffix: '',
                customPricing: false,
                featured: true,
                buttonText: '选择方案',
                buttonLink: '#',
                features: [
                  { label: '全部模块使用权', available: true },
                  { label: '最多200用户', available: true },
                  { label: '高级数据分析与报表', available: true },
                  { label: '7×24小时技术支持', available: true },
                  { label: '基础定制化开发（10人天）', available: true },
                  { label: '专属客户经理', available: true }
                ]
              },
              {
                name: '定制版',
                description: '为大型企业量身定制的方案',
                price: '按需定价',
                annualPrice: '',
                pricePrefix: '',
                priceSuffix: '',
                customPricing: true,
                featured: false,
                buttonText: '联系顾问',
                buttonLink: '#',
                features: [
                  { label: '专属定制模块', available: true },
                  { label: '无用户数量限制', available: true },
                  { label: 'AI驱动的智能分析', available: true },
                  { label: '7×24小时专属支持', available: true },
                  { label: '完全定制化开发', available: true },
                  { label: '专属项目团队', available: true }
                ]
              }
            ]
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'planSelect',
        label: '选择套餐',
        description: '用户点击选择套餐按钮时触发',
        parameters: [
          { name: 'plan', type: 'object', description: '套餐信息对象' },
          { name: 'isAnnual', type: 'boolean', description: '是否选择年度计费' }
        ]
      },
      {
        name: 'billingToggle',
        label: '计费方式切换',
        description: '用户切换按月/按年付费时触发',
        parameters: [
          { name: 'isAnnual', type: 'boolean', description: '是否为年度计费' }
        ]
      },
      {
        name: 'compareClick',
        label: '查看对比点击',
        description: '用户点击查看详细对比时触发'
      }
    ],
    
    actions: [
      {
        name: 'setBilling',
        label: '设置计费方式',
        description: '手动设置按月/按年付费',
        parameters: [
          { name: 'isAnnual', type: 'boolean', required: true, description: '是否为年度计费' }
        ]
      },
      {
        name: 'highlightPlan',
        label: '高亮指定套餐',
        description: '将指定索引的套餐设置为推荐套餐',
        parameters: [
          { name: 'index', type: 'number', required: true, description: '套餐索引' }
        ]
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    
    children: {
      type: Array,
      default: () => []
    },
    // 布局配置
    gridLayout: {
      type: String,
      default: 'grid-cols-1 md:grid-cols-3'
    },
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    cardShadow: {
      type: String,
      default: 'md',
      validator: (value) => ['none', 'sm', 'md', 'lg'].includes(value)
    },
    
    // 显示配置
    showHeader: {
      type: Boolean,
      default: true
    },
    showBillingToggle: {
      type: Boolean,
      default: true
    },
    
    // 计费配置
    annualDiscount: {
      type: Number,
      default: 20,
      validator: (value) => value >= 0 && value <= 100
    },
    trialInfo: {
      type: Object,
      default: () => ({
        show: true,
        days: 30
      })
    },
    
    // 套餐配置
    pricingPlans: {
      type: Array,
      default: () => [
        {
          name: '基础版',
          description: '适合小型企业的入门级方案',
          price: '9,800',
          annualPrice: '7,840',
          pricePrefix: '¥',
          priceSuffix: '',
          customPricing: false,
          featured: false,
          buttonText: '选择方案',
          buttonLink: '#',
          features: [
            { label: '5个核心模块使用权', available: true },
            { label: '最多50用户', available: true },
            { label: '基础数据分析', available: true },
            { label: '工作日8小时支持', available: true },
            { label: '定制化开发', available: false },
            { label: '专属客户经理', available: false }
          ]
        },
        {
          name: '企业版',
          description: '适合中大型企业的全面方案',
          price: '29,800',
          annualPrice: '23,840',
          pricePrefix: '¥',
          priceSuffix: '',
          customPricing: false,
          featured: true,
          buttonText: '选择方案',
          buttonLink: '#',
          features: [
            { label: '全部模块使用权', available: true },
            { label: '最多200用户', available: true },
            { label: '高级数据分析与报表', available: true },
            { label: '7×24小时技术支持', available: true },
            { label: '基础定制化开发（10人天）', available: true },
            { label: '专属客户经理', available: true }
          ]
        },
        {
          name: '定制版',
          description: '为大型企业量身定制的方案',
          price: '按需定价',
          annualPrice: '',
          pricePrefix: '',
          priceSuffix: '',
          customPricing: true,
          featured: false,
          buttonText: '联系顾问',
          buttonLink: '#',
          features: [
            { label: '专属定制模块', available: true },
            { label: '无用户数量限制', available: true },
            { label: 'AI驱动的智能分析', available: true },
            { label: '7×24小时专属支持', available: true },
            { label: '完全定制化开发', available: true },
            { label: '专属项目团队', available: true }
          ]
        }
      ]
    }
  },
  
  data() {
    return {
      // 计费方式状态（false: 按月, true: 按年）
      isAnnualBilling: false
    };
  },
  
  computed: {
    // 阴影样式映射
    shadowClasses() {
      return {
        none: 'shadow-none',
        sm: 'shadow-sm',
        md: 'shadow-md',
        lg: 'shadow-lg'
      };
    }
  },
  
  methods: {
    /**
     * 切换计费方式
     */
    toggleBilling() {
      this.isAnnualBilling = !this.isAnnualBilling;
      this.$emit('billingToggle', { isAnnual: this.isAnnualBilling });
    },
    
    /**
     * 设置计费方式
     */
    setBilling(isAnnual) {
      this.isAnnualBilling = isAnnual;
      this.$emit('billingToggle', { isAnnual: this.isAnnualBilling });
    },
    
    /**
     * 处理套餐选择
     */
    handlePlanSelect(plan) {
      this.$emit('planSelect', {
        plan,
        isAnnual: this.isAnnualBilling
      });
    },
    
    /**
     * 处理查看对比点击
     */
    handleCompareClick() {
      this.$emit('compareClick');
    },
    
    /**
     * 高亮指定套餐
     */
    highlightPlan(index) {
      if (index >= 0 && index < this.pricingPlans.length) {
        // 先移除所有套餐的高亮状态
        this.pricingPlans.forEach(plan => {
          plan.featured = false;
        });
        // 高亮指定套餐
        this.pricingPlans[index].featured = true;
      }
    },
    
    /**
     * 获取套餐卡片的样式类
     */
    getPlanCardClasses(plan) {
      const baseClasses = [
        'rounded-xl', 
        'overflow-hidden', 
        'transition-all', 
        'duration-300',
        'relative'
      ];
      
      // 添加阴影类
      baseClasses.push(this.shadowClasses[this.cardShadow]);
      
      // 添加背景和边框样式
      if (plan.featured) {
        baseClasses.push('bg-white', 'border-2', 'border-primary', 'z-10', 'scale-105');
      } else {
        baseClasses.push('bg-light', 'card-hover');
      }
      
      // 添加圆角样式
      baseClasses.push(`style="border-radius: ${this.cardRadius}px"`);
      
      return baseClasses.join(' ');
    },
    
    /**
     * 获取套餐按钮的样式类
     */
    getPlanButtonClasses(plan) {
      const baseClasses = ['font-medium'];
      
      if (plan.featured) {
        baseClasses.push(
          'bg-primary', 
          'text-white', 
          'hover:bg-primary/90'
        );
      } else {
        baseClasses.push(
          'border', 
          'border-primary', 
          'text-primary', 
          'hover:bg-primary/5'
        );
      }
      
      return baseClasses.join(' ');
    }
  }
};
</script>

<style scoped>
/* 主题色适配 */
.text-primary {
  color: var(--primary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-primary\/5 {
  background-color: rgba(22, 93, 255, 0.05) !important;
}

.bg-primary\/90 {
  background-color: rgba(22, 93, 255, 0.9) !important;
}

.bg-primary\/20 {
  background-color: rgba(22, 93, 255, 0.2) !important;
}

/* 基础样式 */
.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.bg-light {
  background-color: #f9fafb;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1.6;
}


/* 卡片样式 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  /* 在移动设备上移除特色卡片的放大效果 */
  .scale-105 {
    transform: scale(1);
  }
}
</style>
    